<template>
    <div class="form_btn_content" :style="btnContentPosition">
        <div class="form_btn_content_wrap">
            <el-button
                :type="item.type as any"
                :icon="item.iconName as any"
                @click="btnClick(item)"
                v-for="(item, index) in btnList"
                :style="{
                    top: item.top,
                    left: item.left,
                }"
            >
                {{ item.label }}</el-button
            >
        </div>
    </div>
</template>

<script setup lang="ts">
const emit = defineEmits(["btnClick"]);

const props = defineProps({
    btnList: {
        required: false,
        default: () =>
            [
                {
                    label: "查询",
                    type: "primary",
                    top: "",
                    left: "",
                    event: "queryClick",
                    iconName: "Search",
                },
                {
                    label: "重置",
                    type: "info",
                    top: "58px",
                    left: "",
                    iconName: "Refresh",
                },
            ] as any,
    },

    btnContentPosition: {
        required: false,
        default: {
            top: "32px",
            right: "41px",
        } as any,
    },
});

const btnClick = (item: any) => {
    emit("btnClick", item);
};
</script>

<style lang="scss" scoped>
.form_btn_content {
    position: absolute;
    /* margin-left: -20px; */
    &_wrap {
        display: flex;
        position: relative;
        .el-button {
            margin-top: 0;
            margin-left: 0;
            margin-right: 10px;
            height: 39px;
            padding-left: 22px;
            padding-right: 26px;
            font-family: PingFang-SC, PingFang-SC;
            font-weight: 500;
            font-size: 16px;
            @include flexLayout;
        }
    }
}
</style>
